<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-13 18:49:42
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-18 19:29:15
 * @FilePath: \郭招娣\app\src\views\Comment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-card class="upload-card">
      <el-upload
        class="upload-demo"
        :action="action"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img
          v-if="imageUrl"
          :src="imageUrl"
          class="avatar"
          style="width: 100%; height: 200px"
        />
      
        <el-icon color="#409EFC" :size="60"><UploadFilled /></el-icon>
      </el-upload>
    </el-card>

    <div class="img-card">
      <div class="card-item" v-for="(v, i) in data" :key="i">
        <img :src="v.url" alt="" style="width: 100%;height:100px" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { UploadFilled } from "@element-plus/icons-vue";
import { asyncImg } from "../api/poster";
export default {
  components: {
    UploadFilled,
  },
  data() {
    return {
      // 面包屑
      breadList: [],
      action: "/api/upload",
      imageUrl: "",
      data: [],
    };
  },
  created() {
    this.init();
   
  },
  methods: {
    ...mapMutations({
      getBreadList: "getBreadList",
      getWorkbench: "getWorkbench",
    }),
    // 初始化页面
    init() {
      this.getBreadList({ breadList: this.$route.meta.breadList });
      this.getWorkbench({ workbench: false });
      this.upload();
    },
    async upload() {
      const res = await asyncImg("/uploadImg");
      this.data = res.data.urlList;
    },
    handleAvatarSuccess(res) {
      if (res.code == 200) {
         console.log(res);
        this.imageUrl = res.result.url;
      }
    },
  },
};
</script>

<style scoped>
.upload-card,
.img-card,
.box-card {
  margin-top: 20px;
}
.img-card {
  display: flex;
  flex-wrap: wrap;

}
.card-item {
  width: 25%;
  border: 1px solid #ddd;
  padding: 10px;
 
}
</style>